@import plugins.Context
@import org.silkframework.rule.input.Transformer
@import org.silkframework.rule.similarity.Aggregator
@import org.silkframework.rule.similarity.DistanceMeasure
@import controllers.workspace.routes
@import controllers.rules.routes.Assets
@import controllers.core.routes.{Assets => CoreAssets}
@import org.silkframework.rule.LinkSpec

@(context: Context[LinkSpec])(implicit session: play.api.mvc.Session)

@header = {
  <link type="text/css" href="@Assets.at("stylesheets/editor/editor-reset.css")" rel="stylesheet" />
  <link type="text/css" href="@Assets.at("stylesheets/editor/editor.css")" rel="stylesheet" />
  <link type="text/css" href="@Assets.at("stylesheets/editor/status.css")" rel="stylesheet" />

  <script type="text/javascript" src="@Assets.at("js/excanvas.js")"></script>
  <script type="text/javascript" src="@CoreAssets.at("libs/jsplumb/jsPlumb-2.1.8-min.js")"></script>
  <script type="text/javascript" src="@Assets.at("js/editor/editor.js")"></script>
  <script type="text/javascript" src="@Assets.at("js/editor/status.js")"></script>
  <script type="text/javascript" src="@Assets.at("js/editor/serializeRule.js")"></script>
  <script type="text/javascript" src="@Assets.at("js/editor/editableLabel.js")"></script>

  <script type="text/javascript">
    var inEditorEnv = true;
    var projectName = '@context.project.name';
    var taskName = '@context.task.id';
    var ruleIndex = '';
    var editorUrl = baseUrl + '/linking/' + projectName + '/' + taskName + '/editor';
    var apiUrl = '@config.baseUrl/linking/tasks/@context.project.name/@context.task.id';
    var serializationFunction = serializeLinkageRule;
  </script>
}

@toolbar = {
  <ul>
    <li>
      <button id="undo" class="mdl-button mdl-js-button mdl-button--icon" onclick="undo()">
        <i class="material-icons">undo</i>
      </button>
    </li>
    <li>
      <button id="redo" class="mdl-button mdl-js-button mdl-button--icon" onclick="redo()">
        <i class="material-icons">redo</i>
      </button>
    </li>
    <li>
      <div class="spacer"/>
    </li>
    <li>
      <button id="button_reload_paths" class="mdl-button mdl-js-button mdl-button--icon" onclick="reloadPropertyPaths();">
        <i class="material-icons">cached</i>
      </button>
      <div class="mdl-tooltip mdl-tooltip--large" for="button_reload_paths">
        Reload Property Paths
      </div>
    </li>
    <li>
      <a id="button_get_linkspec" class="mdl-button mdl-js-button mdl-button--icon" href="@routes.WorkspaceApi.exportLinkSpec(context.project.name, context.task.id).url" target="_blank">
        <i class="material-icons">file_download</i>
      </a>
      <div class="mdl-tooltip mdl-tooltip--large" for="button_get_linkspec">
        Get Link Specification to be executed from the command line
      </div>
    </li>
    <li>
      <a id="button_editor_help" class="mdl-button mdl-js-button mdl-button--icon" href="http://www.assembla.com/spaces/silk/wiki/Linkage_Rule_Editor" target="_help">
        <i class="material-icons">help_outline</i>
      </a>
      <div class="mdl-tooltip mdl-tooltip--large" for="button_editor_help">
        Show linkage rule editor documentation
      </div>
    </li>
    <li>
      <div class="spacer"/>
    </li>
    <li>
      <label>Link Limit:</label>
      <div id="select_link_limit" class="mdl-selectfield mdl-js-selectfield" style="width: 90px;">
        <select id="linklimit" class="mdl-selectfield__select" onchange="modifyLinkSpec()">
          <option value="unlimited">unlimited</option>
          @for(i <- 1 to 10) {
            <option value="@i" @if(context.task.data.rule.filter.limit == Some(i)) {selected="selected"}>@i</option>
          }
        </select>
      </div>
      <div class="mdl-tooltip mdl-tooltip--large" for="select_link_limit">
        Defines the number of links (n) originating from a single data item. Only the n highest-rated links per source data item will remain after the filtering.
      </div>
    </li>
    <li>
      <div class="spacer"/>
    </li>
    <li>
      <label>Link Type:</label>
      <div id="input_link_type" class="mdl-textfield mdl-js-textfield">
        <input id="linktype" class="mdl-textfield__input" type="text" onchange="modifyLinkSpec()" value="@context.project.config.prefixes.shorten(context.task.data.rule.linkType.uri)" />
      </div>
    </li>
  </ul>

  @status()

  <div id="score-widget">@* Filled by updateScore() *@</div>
}

@content = {
  <div class="draggables mdl-shadow--2dp">
    <div id="palette-header">
      <div id="operatorSearchField" class="mdl-textfield mdl-js-textfield">
        <input class="mdl-textfield__input" type="text" id="operator_search_term">
        <label class="mdl-textfield__label" for="operator_search_term">Search term...</label>
      </div>
    </div>

    <div id="operators-grouped">
      <div id="paths">
        <div id="loading" style="width:230px;">loading ...</div>
        <script type="text/javascript">
          getPropertyPaths("#paths");
        </script>
      </div>

      <div id="operators">
        @operators("Transformations", "transform", Transformer.pluginsByCategory, context.project)
        @operators("Comparators", "compare", DistanceMeasure.pluginsByCategory, context.project)
        @operators("Aggregators", "aggregate", Aggregator.pluginsByCategory, context.project)
      </div>
    </div>

    <div id="operators-search-result" style="display: none;">
      <div id="no_match_alert" class="alert alert-info">
        <strong>No matching operators</strong>
      </div>
      <div id="operatorList" class="scrollboxes" style="height: 100%;">
        <div id="paths_search">
          loading paths ...
          <script type="text/javascript">
            getPropertyPaths("#paths_search", false);
          </script>
        </div>
        @operatorsAll("Transformations", "transform", Transformer, context.project)
        @operatorsAll("Comparators", "compare", DistanceMeasure, context.project)
        @operatorsAll("Aggregators", "aggregate", Aggregator, context.project)
      </div>
    </div>
  </div>
  <script type="text/javascript" src="@Assets.at("js/jquery.mark.min.js")"></script>
  <script type="text/javascript" src="@Assets.at("js/editor/operatorSearch.js")"></script>

  <div class="wrapperEditor">

    <div class="droppable_outer">

      <div id="droppable" class="mdl-shadow--2dp">
        @context.task.data.rule.operator match {
          case Some(op) => {
            @renderRule(
              rule = op,
              project = context.project
            )
          }
          case None => {
            <script type="text/javascript">
              jsPlumb.bind("ready", function() {
                initEditor();
              });
            </script>
          }
        }
      </div>

    </div>

  </div>
}

@main(Some(context))(header)(toolbar)(content)